<template>
	<view class="container">
		<!-- 新增顶部波浪形装饰 -->
		<view class="wave-bg">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
				<path fill="#a8d8ea" fill-opacity="1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
			</svg>
		</view>
		
		<view class="content">
			<!-- 修改标题样式 -->
			<view class="header">
				<image src="/static/logo.png" class="logo"></image>
				<text class="title">{{ isLogin ? '心灵登录' : '心灵港湾' }}</text>
				<text class="subtitle">让AI温暖你的每一天</text>
			</view>
			
			<!-- 表单容器增加柔和阴影 -->
			<view class="form-card">
				<view class="form-item" v-for="(item, index) in formItems" :key="index" v-if="!item.show || !isLogin">
					<text class="label">{{ item.label }}</text>
					<input 
						v-model="item.value" 
						:type="item.type || 'text'" 
						:placeholder="item.placeholder" 
						class="input" 
						:style="{ borderColor: item.error ? '#ff6b81' : '#e0f7fa' }"
					/>
					<view v-if="item.error" class="error-tip">{{ item.error }}</view>
				</view>

				<!-- 修改按钮为渐变色彩 -->
				<button 
					@click="submitForm" 
					class="submit-button"
					:style="{
						background: 'linear-gradient(135deg, #a8d8ea 0%, #aa96da 100%)'
					}"
				>
					{{ isLogin ? '进入心灵港湾' : '开启心灵之旅' }}
				</button>

				<!-- 切换链接样式优化 -->
				<view class="toggle-container">
					<text @click="toggleLoginRegister" class="toggle-text">
						{{ isLogin ? '没有港湾？立即注册' : '已有心灵港湾？立即登录' }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import baseUrl from '../../static/path.js'
export default {
	data() {
		return {
			isLogin: true,
			formItems: [
				{
					label: '用户名',
					value: '',
					placeholder: '请输入心灵昵称',
					key: 'username'
				},
				{
					label: '密码',
					value: '',
					type: 'password',
					placeholder: '请输入保护密码',
					key: 'password'
				},
				{
					label: '学号',
					value: '',
					placeholder: '请输入校园学号',
					key: 'studentId',
					show: true // 默认隐藏
				},
				{
					label: '紧急联系人',
					value: '',
					placeholder: '最关心你的人',
					key: 'emergencyContact',
					show: true // 默认隐藏
				}
			]
		}
	},
	methods: {
		toggleLoginRegister() {
			this.isLogin = !this.isLogin;
			this.formItems[2].show=!this.formItems[2].show;
			this.formItems[3].show=!this.formItems[3].show;
		},
		submitForm() {
				if (this.isLogin) {
					// 登录逻辑
					uni.request({
						url: `${baseUrl}/user/login`,
						method: 'POST',
						data: {
							username: this.formItems[0].value,
							password: this.formItems[1].value  
						},
						success: (response) => {
							if (response.statusCode === 200) {
								// 登录成功后的处理
								uni.setStorageSync('access_token', response.data.access_token); // 保存 token
								uni.showToast({
									title: '登录成功',
									icon: 'success'
								});
								// 跳转到用户主页或其他页面
								uni.switchTab({
								    url: '/pages/psychology/psychology'
								})
							} else {
								// 登录失败，显示错误信息
								uni.showToast({
									title: response.data.msg || '登录失败',
									icon: 'none'
								});
							}
						},
						fail: (error) => {
							console.error("登录请求失败", error);
							uni.showToast({
								title: '请求失败，请重试',
								icon: 'none'
							});
						}
					});
				} else {
					// 注册逻辑
					uni.request({
						url: `${baseUrl}/user/register`, // 后端注册接口
						method: 'POST',
						data: {
							student_id: this.formItems[2].value,
							username: this.formItems[0].value,    // 用户名
							password: this.formItems[1].value,    // 密码
							emergency_contact: this.formItems[3].value // 紧急联系人
						},
						success: (response) => {
							if (response.statusCode === 201) {
								// 注册成功后的处理
								console.log("注册成功", response.data);
								uni.showToast({
									title: '注册成功',
									icon: 'success'
								});
								this.isLogin = true; // 切换到登录界面
								this.formItems[2].show=!this.formItems[2].show;
								this.formItems[3].show=!this.formItems[3].show;
							} else {
								// 注册失败，显示错误信息
								uni.showToast({
									title: response.data.msg || '注册失败',
									icon: 'none'
								});
							}
						},
						fail: (error) => {
							console.error("注册请求失败", error);
							uni.showToast({
								title: '请求失败，请重试',
								icon: 'none'
							});
						}
					});
				}
			}
	}
}
</script>

<style>
/* 新增全局样式 */
:root {
	--primary-color: #a8d8ea;
	--secondary-color: #aa96da;
	--text-color: #5e5e5e;
}

.container {
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(to bottom, #f5f7fa 0%, #e4f2fe 100%);
	position: relative;
	overflow: hidden;
}

.wave-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
}

.content {
	padding: 60px 24px 30px;
	z-index: 2;
	position: relative;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30px;
}

.logo {
	width: 80px;
	height: 80px;
	margin-bottom: 15px;
}

.title {
	font-size: 24px;
	font-weight: 600;
	color: var(--text-color);
	margin-bottom: 8px;
	font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.subtitle {
	font-size: 14px;
	color: #888;
}

.form-card {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	padding: 25px;
	box-shadow: 0 10px 30px rgba(168, 216, 234, 0.2);
	backdrop-filter: blur(5px);
}

.form-item {
	margin-bottom: 20px;
	position: relative;
}

.label {
	display: block;
	font-size: 14px;
	color: var(--text-color);
	margin-bottom: 8px;
	padding-left: 8px;
}

.input {
	width: calc(100% - 30px); /* 减去左右边距 */
	height: 48px;
	padding: 0 15px;
	border-radius: 12px;
	border: 1px solid #e0f7fa;
	background-color: rgba(224, 247, 250, 0.3);
	font-size: 15px;
	transition: all 0.3s;
	margin: 0 auto; /* 中心对齐 */
}

.input:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px rgba(168, 216, 234, 0.3);
}

.submit-button {
	width: 100%;
	height: 50px;
	border-radius: 12px;
	color: white;
	font-size: 16px;
	font-weight: 500;
	border: none;
	margin-top: 10px;
	box-shadow: 0 4px 15px rgba(170, 150, 218, 0.3);
	transition: all 0.3s;
}

.submit-button:active {
	transform: translateY(2px);
	box-shadow: 0 2px 5px rgba(170, 150, 218, 0.3);
}

.toggle-container {
	margin-top: 20px;
	text-align: center;
}

.toggle-text {
	color: var(--secondary-color);
	font-size: 13px;
	text-decoration: underline;
}

.footer {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}

.footer-img {
	width: 150px;
	height: 50px;
	opacity: 0.6;
}

.error-tip {
	color: #ff6b81;
	font-size: 12px;
	padding: 4px 8px;
}
</style>
